本日小作品:
https://drive.google.com/file/d/1yAdpP_hzVZSL5KhaaWkAP0A3p3D0N43o/view?usp=sharing
padding: 10px;
漢堡選單的圖片大小是24px的正方形,一般來說人的手指點擊約為44px,所以使用padding讓高度變成44px方便點擊,這也是RWD的細節之一。
@media(max-width:768px){
.header .nav{
flex-direction: column;
position: absolute;
top: 44px;
left: -100px;
transition: all .6s ease;
}
.header .btn{
display: block;
}
}
當使用者使用行動裝置的時候將漢堡選單按鈕出現,導覽列整行消失。因為這次的導覽列數量很多(模擬新聞網站等等類型),所以併排成兩行之類的仍舊會看起來很吃力。做成下拉選單又太多,所以將其改變flex-direction,變成一行並使用絕對定位讓其跑到畫面之外。
.banner{
max-width: 960px;
margin: 0 auto;
height: 600px;
background-image: url(https://cdn.pixabay.com/photo/2020/09/30/17/05/road-5616457_1280.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: lightblue;
}
一般來說圖片透過max-width能夠隨著原比例伸縮,但這裡希望是把圖片截去一部分,所以使用background-image來處理banner,因為是background-image,只要控制banner讓其設定好max-width,圖片多餘的部分就會自動被隱藏起來,也不會出現x軸的bar,達到RWD的效果。
var btn = document.querySelector(".btn");
btn.addEventListener("click",function(){
var location = document.querySelector('.header .nav').style.left;
if(location == "0px"){
document.querySelector('.header .nav').style.left = "-100px";
}else{
document.querySelector('.header .nav').style.left = "0px";
}
},false)
在漢堡選單按鈕上綁定點擊事件,透過js改變絕對定位的left值,如果原本是收闔則打開,反之則收闔。
---
備註:
因為在CodePen使用瀏覽器內建的手機模擬好像會跑不太出來,所以本次就直接上傳壓縮過後的原始檔案。
---
本日結語:
今天是二十五天,除了導覽列和Banner的RWD效果之外,主要是練習了側邊選單的做法,如有寫錯之處麻煩各路高手指教><。